<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/brain.png') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
            crossorigin="anonymous"></script>
</head>
<body>
    <div class="btn-group" role="group" aria-label="">
      <button id="pageNo" type="button" class="btn btn-default">当前：0</button>
      <button id="prePage" type="button" class="btn btn-default">上一页</button>
      <button id="nextPage" type="button" class="btn btn-default">下一页</button>
    </div>

    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th scope="col" style="width: 60px;">角色</th>
                <th scope="col">内容</th>
            </tr>
        </thead>
        <tbody id="msglist">
        </tbody>
    </table>
    <script>
        let PAGE_NO = 1;
        $(document).ready(function (){

            $("#prePage").click(function (){
                PAGE_NO--
                loadHisData()
            })
            $("#nextPage").click(function (){
                PAGE_NO++
                loadHisData()
            })

            loadHisData()
        })
        function loadHisData(){
            PAGE_NO = PAGE_NO<1?1:PAGE_NO
            $("#pageNo").html("当前："+PAGE_NO)
            // load Data

            $.ajax({
                url: '/hisList', // 后台接口的URL
                {#url: 'http://127.0.0.1:5000/hisList', // 后台接口的URL#}
                type: 'GET', // 请求类型为GET
                data: {
                    pgNo: PAGE_NO
                },
                success: function (response) {
                    console.log(response);
                    if (response.code == 200) {
                        let data = response.data.his
                        let thread = ''
                        for(var i=0;i<data.length;i++){
                            thread += addMsg(data[i])
                        }
                        $("#msglist").html(thread)
                    }
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }
        function addMsg(message){
            let mdCnt = marked.parse(message['a'])
            let tbrow = `
                <tr>
                    <td>用户</td>
                    <td style="white-space: pre-wrap;">${message['q']}</td>
                </tr>
                <tr>
                    <td>AI</td>
                    <td style="white-space: pre-wrap;">${mdCnt}</td>
                </tr>
                `
            return tbrow
        }

    </script>
</body>
</html>